<template>
	<view  class="container">
		<uni-section title="卡片封面图+操作栏" type="line">
					<uni-card :cover="cover" @click="onClick">
						<!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
						<text class="uni-body">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
						<view slot="actions" class="card-actions">
							<view class="card-actions-item" @click="actionsClick('分享')">
								<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">分享</text>
							</view>
							<view class="card-actions-item" @click="actionsClick('点赞')">
								<uni-icons type="heart" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">点赞</text>
							</view>
							<view class="card-actions-item" @click="actionsClick('评论')">
								<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">评论</text>
							</view>
						</view>
					</uni-card>
		</uni-section>
	</view>
</template>

<script setup>
	const cover='https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
   
	const vatar='https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
	
	cosnt extraIcon={
						color: '#4cd964',
						size: '22',
						type: 'gear-filled'
					}
	
	const oncliick= (e)=>{
					console.log(e)
				},
				
	const actionsClick=(text)=>{
					uni.showToast({
						title:text,
						icon:'none'
					})
				}
</script>

<style lang="scss" scoped>
.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}
	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}
	.cover-image {
		flex: 1;
		height: 150px;
	}
	.no-border {
		border-width: 0;
	}
</style>